<template>
  <div class="dialogUpload">
    <el-dialog
      title="图片上传"
      :visible.sync="isshow"
      width="40%"
      :show-close="false"
    >
      <div style="margin-bottom:20px;">图片</div>
      <el-upload
        action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=materialLibraryImageIndex"
        list-type="picture-card"
        :on-success="ImgUpSuccess"
        :on-remove="ImgRemove"
        :on-exceed="upLimit"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button style="background-color:#fd804c;color: #fff;" @click="upload"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isshow", "imgGroupId"],
  data() {
    return {
      imgList: []
    };
  },
  methods: {
    cancel() {
      this.$emit("changeShowImgDialog", false);
    },
    async upload() {
      let imgList = [];
      this.imgList.forEach(item => {
        const key = Object.keys(item)[0];
        const obj = {
          imgUrl: key,
          imgName: item[key]
        };
        imgList.push(obj);
      });
      let data = {
        imgGroupId: this.imgGroupId,
        imgList
      };
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/addMaterialLibrary",
        method: "post",
        data
      })
        .then(res => {
          this.$message.success("上传图片成功");
          this.cancel();
          setTimeout(() => {
            this.$router.go(0);
          }, 1500);
        })
        .catch(err => {
          this.$message.error("上传图片失败");
        });
    },
    ImgUpSuccess(data) {
      this.imgList.push(data);
    },
    ImgRemove(file, fileList) {
      const imgList = [];
      fileList.forEach(f => {
        let imgUrl = f.response.data;
        imgList.push(imgUrl);
      });
      this.imgList = imgList;
    },
    upLimit() {}
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__header {
  padding-top: 5px;
  padding-bottom: 5px;
}
/deep/ .el-upload-list--picture-card {
  .el-upload-list__item {
    width: 100px;
    height: 100px;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
/deep/ .el-upload--picture-card {
  width: 100px;
  height: 100px;
  position: relative;
  .el-icon-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
